<template>
    <div class="app-container home">
        <van-field v-model="phoneNo" type="tel" label="手机号" placeholder="请输入商户手机号">
            <template #button>
                <div :style="time?'color: #cbd9ed':'color: #1A65EE'" @click="getVerifyCodeFun">
                    {{ time ? "再次获取" + time : "获取验证码" }}
                </div>
            </template>
        </van-field>
        <van-field v-model="verifyCode" label="验证码" type="number" placeholder="请输入验证码" />
<!--        <van-field v-model="newPwd" label="新密码" type="password" placeholder="请输入新密码" />-->
<!--        <van-field v-model="newPwdT" label="确认密码" type="password" placeholder="再次输入新密码" />-->
        <div class="btn">
            <van-button color="#66d6ff" @click="toIndex" type="primary" block>确 定</van-button>
        </div>
    </div>
</template>

<script setup name="resetPwdByPhone">
// 获取验证码
import { showSuccessToast, showToast } from "vant"
import { loseLoginPassSecurityCode, securityCodeValid } from "@/api/agent.ts"

const phoneNo = ref("")
const verifyCode = ref("")
const newPwd = ref("")
const newPwdT = ref("")
const router = useRouter()
const time = ref(0)

const getVerifyCodeFun = () => {
    if (!phoneNo.value) {
        showToast("请输入用户手机号")
        return
    }
    if (time.value > 0) {
        return
    }
    loseLoginPassSecurityCode({
        username: phoneNo.value
    }).then(res => {
        time.value = 60
        const timer = setInterval(() => {
            if (time.value > 0) {
                time.value = time.value - 1
            } else {
                time.value = 0
                clearInterval(timer)
            }
        }, 1000)
        showSuccessToast("验证码获取成功")
    })
}
const toIndex = () => {
    if (!phoneNo.value) {
        showToast("请输入商户手机号")
        return
    }
    if (!verifyCode.value) {
        showToast("请输入验证码")
        return
    }

    securityCodeValid({
        username: phoneNo.value,
        securityCode: verifyCode.value,
        businessDesc: ''
    }).then(res => {
        router.push({
            path: '/pwd',
            query: {
                phoneNo: phoneNo.value,
                securityCode:verifyCode.value
            }
        })
    })
}
</script>

<style scoped lang="scss">
.app-container {
    padding: 10px;

    .btn {
        margin-top: 20px;
    }
}
</style>

